﻿<html>
	<head>
		<title>PopupEdit - jQuery LigerUI API</title>     
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
		<link href="../common.css" rel="stylesheet" type="text/css" />
		<script src="../core.js" type="text/javascript"></script> 
	</head>
	<body>
		<h2>ligerPopupEdit</h2> 
         
        
                    <p> 
            弹出编辑框组件
        </p>
                     
          
                <h3>示例</h3>
        <pre><div><!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><span style="color: #008080;"> 1</span> <span style="color: #0000FF;">&lt;</span><span style="color: #800000;">body </span><span style="color: #FF0000;">style</span><span style="color: #0000FF;">=&quot;padding:10px&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;"> 
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;"> 
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">   </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">input </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;text&quot;</span><span style="color: #FF0000;"> id</span><span style="color: #0000FF;">=&quot;popTxt&quot;</span><span style="color: #0000FF;">/&gt;</span><span style="color: #000000;"> 
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">br </span><span style="color: #0000FF;">/&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;btn1&quot;</span><span style="color: #0000FF;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">        </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">script </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;text/javascript&quot;</span><span style="color: #0000FF;">&gt;</span><span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;">10</span> <span style="background-color: #F5F5F5; color: #000000;">            
</span><span style="color: #008080;">11</span> <span style="background-color: #F5F5F5; color: #000000;">            $(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">#btn1</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).ligerButton({
</span><span style="color: #008080;">12</span> <span style="background-color: #F5F5F5; color: #000000;">                text: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">获取值</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">,
</span><span style="color: #008080;">13</span> <span style="background-color: #F5F5F5; color: #000000;">                click: </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> () {
</span><span style="color: #008080;">14</span> <span style="background-color: #F5F5F5; color: #000000;">                    </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> value </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> $.ligerui.get(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">popTxt</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).getValue();
</span><span style="color: #008080;">15</span> <span style="background-color: #F5F5F5; color: #000000;">                    alert(value);
</span><span style="color: #008080;">16</span> <span style="background-color: #F5F5F5; color: #000000;">                }
</span><span style="color: #008080;">17</span> <span style="background-color: #F5F5F5; color: #000000;">            });
</span><span style="color: #008080;">18</span> <span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;">19</span> <span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;">20</span> <span style="background-color: #F5F5F5; color: #000000;">            $(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">#popTxt</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).ligerPopupEdit({
</span><span style="color: #008080;">21</span> <span style="background-color: #F5F5F5; color: #000000;">                condition: {
</span><span style="color: #008080;">22</span> <span style="background-color: #F5F5F5; color: #000000;">                    fields: [{ name: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">CompanyName</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, label: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">客户</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;"> }]
</span><span style="color: #008080;">23</span> <span style="background-color: #F5F5F5; color: #000000;">                },
</span><span style="color: #008080;">24</span> <span style="background-color: #F5F5F5; color: #000000;">                grid: getGridOptions(</span><span style="background-color: #F5F5F5; color: #0000FF;">true</span><span style="background-color: #F5F5F5; color: #000000;">),
</span><span style="color: #008080;">25</span> <span style="background-color: #F5F5F5; color: #000000;">                valueField: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">CustomerID</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">,
</span><span style="color: #008080;">26</span> <span style="background-color: #F5F5F5; color: #000000;">                textField: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">CustomerID</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">,
</span><span style="color: #008080;">27</span> <span style="background-color: #F5F5F5; color: #000000;">                width: </span><span style="background-color: #F5F5F5; color: #000000;">600</span><span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;">28</span> <span style="background-color: #F5F5F5; color: #000000;">            });
</span><span style="color: #008080;">29</span> <span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;">30</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> getGridOptions(checkbox) {
</span><span style="color: #008080;">31</span> <span style="background-color: #F5F5F5; color: #000000;">                </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> options </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> {
</span><span style="color: #008080;">32</span> <span style="background-color: #F5F5F5; color: #000000;">                    columns: [
</span><span style="color: #008080;">33</span> <span style="background-color: #F5F5F5; color: #000000;">                    { display: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">顾客</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, name: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">CustomerID</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, align: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">left</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, width: </span><span style="background-color: #F5F5F5; color: #000000;">100</span><span style="background-color: #F5F5F5; color: #000000;">, minWidth: </span><span style="background-color: #F5F5F5; color: #000000;">60</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">34</span> <span style="background-color: #F5F5F5; color: #000000;">                    { display: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">公司名</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, name: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">CompanyName</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, minWidth: </span><span style="background-color: #F5F5F5; color: #000000;">120</span><span style="background-color: #F5F5F5; color: #000000;">, width: </span><span style="background-color: #F5F5F5; color: #000000;">100</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">35</span> <span style="background-color: #F5F5F5; color: #000000;">                    { display: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">联系名</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, name: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">ContactName</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, minWidth: </span><span style="background-color: #F5F5F5; color: #000000;">140</span><span style="background-color: #F5F5F5; color: #000000;">, width: </span><span style="background-color: #F5F5F5; color: #000000;">100</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">36</span> <span style="background-color: #F5F5F5; color: #000000;">                    { display: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">电话</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, name: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">Phone</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, width: </span><span style="background-color: #F5F5F5; color: #000000;">100</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">37</span> <span style="background-color: #F5F5F5; color: #000000;">                    { display: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">城市</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, name: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">City</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, width: </span><span style="background-color: #F5F5F5; color: #000000;">100</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">38</span> <span style="background-color: #F5F5F5; color: #000000;">                    { display: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">国家</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, name: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">Country</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, width: </span><span style="background-color: #F5F5F5; color: #000000;">100</span><span style="background-color: #F5F5F5; color: #000000;"> }
</span><span style="color: #008080;">39</span> <span style="background-color: #F5F5F5; color: #000000;">                    ], switchPageSizeApplyComboBox: </span><span style="background-color: #F5F5F5; color: #0000FF;">false</span><span style="background-color: #F5F5F5; color: #000000;">,
</span><span style="color: #008080;">40</span> <span style="background-color: #F5F5F5; color: #000000;">                    data: $.extend({}, CustomersData),
</span><span style="color: #008080;">41</span> <span style="background-color: #F5F5F5; color: #000000;">                    pageSize: </span><span style="background-color: #F5F5F5; color: #000000;">10</span><span style="background-color: #F5F5F5; color: #000000;">,
</span><span style="color: #008080;">42</span> <span style="background-color: #F5F5F5; color: #000000;">                    checkbox: checkbox
</span><span style="color: #008080;">43</span> <span style="background-color: #F5F5F5; color: #000000;">                };
</span><span style="color: #008080;">44</span> <span style="background-color: #F5F5F5; color: #000000;">                </span><span style="background-color: #F5F5F5; color: #0000FF;">return</span><span style="background-color: #F5F5F5; color: #000000;"> options;
</span><span style="color: #008080;">45</span> <span style="background-color: #F5F5F5; color: #000000;">            }
</span><span style="color: #008080;">46</span> <span style="background-color: #F5F5F5; color: #000000;">        </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">47</span> <span style="color: #000000;"></span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">48</span> <span style="color: #000000;"></span></div></pre>
        
        <h3>截图</h3>

        <p>
            <img src="../../uishow/ligerPopupEdit.jpg" />
        </p>  
        

			</body>
</html>